<template>
	<view class="wrap-item" v-if="item">
		<view class="flex align-center just-between">
			<view class="title-bg f-30 flex">
				<view class="must" v-if="item.require">*</view>

				<view class="title">{{ item.title }}</view>
			</view>

			<view class="add f-26" @click="onAddSign">添加</view>
		</view>

		<view class="wrap-list m-t-30 flex">
			<block v-for="(listItem, listIndex) in item.list" :key="listIndex">
				<view
					class="list-item"
					:class="value.includes(listItem.id) ? 'list-item-active' : ''"
					@click="onChooseList(item, listIndex)"
				>
					{{ listItem.name }}
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
			/**
			 * 是否单选
			 */
			isRadio: {
				type: Boolean,
				default: true,
			},
		},
		methods: {
			/**
			 * 添加标签
			 */
			onAddSign() {
				this.$emit("addSign");
			},
			/**
			 * 列表选择
			 */
			onChooseList(item, listIndex) {
				const value = this.value;
				const id = item.list[listIndex].id.toString();

				if (this.isRadio === true) {
					//单选
					this.$emit("input", id);
				} else {
					var chooseList = value === "" ? [] : value.split(",");

					const chooseIndex = chooseList.indexOf(id);

					if (chooseIndex === -1) {
						chooseList.push(id);
					} else {
						chooseList.splice(chooseIndex, 1);
					}
					this.$emit("input", chooseList.join(","));
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/css/publish.css";

	.list-item {
		width: fit-content;
		height: fit-content;
		line-height: 1;
		padding: 15rpx 15rpx;
		box-sizing: border-box;
		max-width: 100%;
	}

	.add {
		width: 100rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		overflow: hidden;
		background: $theme-gradit-color;
		color: white;
	}
</style>
